<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="home/public/head::head(~{::title},~{::style},~{::link})">
    <title>有问有答-答题吧</title>
    <link rel="stylesheet" type="text/css" th:href="@{/static/common/plugs/viewer/viewer.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/static/common/plugs/bootstrap-select/css/bootstrap-select.css}"/>
    <style>
        .label {
            color: #746F6F;
        }

        .label-info {
            color: #FFFFFF;
        }

        [v-cloak] {
            display: none;
        }

        .row {
            padding-top: 5px;
            padding-bottom: 10px;
        }

        img {
            width: 30%;
        }

        .img-thumbnail {
            height: 150px;
            width: auto;
        }


        p {
            line-height: 30px;
        }
        .tab-content{
            border-left: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            border-right: 1px solid #ddd;
        }
    </style>
</head>

<body>

<!--顶部导航栏-->
<div th:replace="home/public/top-menu::top-menu"></div>

<div id="question_container" v-cloak>
    <!--问题搜索栏开始-->
    <nav class="navbar navbar-default ex-navbar">
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <form class="navbar-form navbar-left form-inline" style="text-align: center;width: 100%;">
                <div class="form-group">
                    <select class="form-control" v-model="searchGradeId">
                        <option selected value="">所有年级</option>
                        <option v-for="item in gradeList" :value="item.id">{{item.gradeName}}</option>
                    </select>
                </div>
                <div class="form-group">
                    <select class="form-control" v-model="searchSubjectId">
                        <option selected value="">所有学科</option>
                        <option v-for="item in subjectList" :value="item.id">{{item.subjectName}}</option>
                    </select>
                </div>
                <div class="form-group">
                    <input type="text" v-model="questionSummary" class="form-control" placeholder="题目内容...">
                </div>
                <button type="button" @click="searchBtn()" class="btn btn-warning">搜索问题</button>
                <a th:href="@{/home/index/ask}" class="btn btn-info">去提问</a>
            </form>
        </div>
    </nav>
    <!--问题搜索栏结束-->

    <!--问题列表开始-->
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-xs-10">
                <!--tab选项卡开始-->
                <ul id="myTab" class="nav nav-tabs">
                    <li class="active">
                        <a href="#home" data-toggle="tab" @click="changeIntegral('false')">
                            全部问题
                        </a>
                    </li>
                    <li><a href="#home" @click="changeIntegral('true')"
                                                              data-toggle="tab">积分悬赏</a></li>
                </ul>
                <!--tab选项卡结束-->

                <!--tab选项卡内容部分开始-->
                <div id="myTabContent" class="tab-content" style="padding: 20px;">
                    <!--问题列表开始-->
                    <div class="tab-pane fade in active" id="home">
                        <p>
                            <strong>年级：</strong>
                            <span class="label" :class="{'label-info':gradeId==''}" @click="changeGradeId('')">全部</span>
                            <span v-for="item in gradeList"
                                  @click="changeGradeId(item.id)"
                                  class="label"
                                  :class="{'label-info':gradeId==item.id}">{{item.gradeName}}</span>
                        </p>
                        <p>
                            <strong>学科：</strong>
                            <span class="label" :class="{'label-info':subjectId==''}"
                                  @click="changeSubjectId('')">全部</span>
                            <span v-for="item in subjectList"
                                  @click="changeSubjectId(item.id)"
                                  class="label"
                                  :class="{'label-info':subjectId==item.id}">{{item.subjectName}}</span>
                        </p>


                        <div class="row" v-for="item in questionList"
                             style="border-bottom: #ddd 1px solid;margin-top: 15px;">

                            <a :href="'/home/index/userinfo/'+item.user.id" class="col-md-2 layui-anim layui-anim-scaleSpring">
                                <img :src="item.user.userPhoto" style="width: 100%;"
                                     class="img-rounded"/>
                                <p class="text-center">{{item.user.nickName}}</p>
                            </a>

                            <div class="col-md-10 layui-anim layui-anim-scaleSpring">
                                <div class="row">
                                    <div class="col-md-12" :id="'viewer'+item.id">
                                        <p class="text-left">
                                            {{item.questionSummary}}
                                        </p>
                                        <img v-for="photo in item.questionPhotoList" :src="photo" :data-original="photo"
                                             v-if="item.questionPhotoList!=null"
                                             class="img-thumbnail">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <label class="col-md-3 text-success">
                                            [{{item.grade.gradeName}}{{item.subject.subjectName}}]
                                        </label>
                                        <label class="col-md-9 text-muted">{{item.createTime}}</label>
                                    </div>

                                    <div class="col-md-6 text-right">
                                        <span class="col-md-3 col-md-offset-1 label label-success"
                                              style="color: white;">悬赏积分：{{item.integral}}分</span>
                                        <span class="col-md-3 col-md-offset-1 label label-info"><a
                                                :href="'/home/index/answer/'+item.id" style="color: white;">回答：【{{item.count}}】</a></span>
                                        <a @click="report('ANSWER',item.id)" style="color: white;"
                                           class="col-md-3 col-md-offset-1 label label-danger">举报此提问</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="rom text-right">
                            <ul class="pagination">
                                <li :class="{'disabled':pageNum<=1}" @click="changePage(pageNum-1)"><a
                                        href="#">&laquo;</a>
                                </li>
                                <li :class="{'disabled':pageNum==item}" v-for="(item,index) in pages"
                                    @click="changePage(item)"><a href="#">{{item}}</a></li>
                                <li :class="{'disabled':pageNum>=pages}" @click="changePage(pageNum+1)"><a
                                        href="#">&raquo;</a></li>
                            </ul>
                        </div>
                    </div>
                    <!--问题列表结束-->

                </div>
                <!--tab选项卡内容部分结束-->

            </div>
        </div>
    </div>
    <!--问题列表结束-->

</div>

<!-- 底部导航栏 start-->
<footer th:replace="home/public/footer::footer"></footer>
<!-- 底部导航栏end -->

<script th:src="@{/static/common/plugs/vue/vue.js}"></script>
<script th:src="@{/static/common/plugs/viewer/viewer.js}"></script>
<script th:src="@{/static/common/plugs/bootstrap-select/js/bootstrap-select.js}"></script>

<!--vue相关js-->
<script th:inline="javascript">

    //图片上传接口地址
    var uploadUrl = "/home/question/uploadImages";
    /*layui插件模块加载开始*/
    layui.use(['element', 'laypage', 'layer', 'form'], function () {
        var laypage = layui.laypage
            , layer = layui.layer
            , form = layui.form;
    });
    /*layui插件模块加载结束*/

    /*初始化图片查看插件viewer*/
    function initViewer() {
        for (var i = 0; i < app.$data.questionList.length; i++) {
            var containerId = app.$data.questionList[i].id;
            $("#viewer" + containerId).viewer({
                url: "data-original"
            });
            console.log("初始化了viewer:#viewer" + containerId);
        }
    }
    /*销毁上一结果集产生的viewer，防止失效或者错乱*/
    function destroyViewer() {
        for (var i = 0; i < app.$data.questionList.length; i++) {
            var containerId = app.$data.questionList[i].id;
            $("#viewer" + containerId).viewer("destroy");
            console.log("销毁了viewerimg:#viewerimg" + containerId);
        }
    }

    var that = this;
    /*vue实例化开始*/
    var app = new Vue({
        el: "#question_container",
        data: {
            subjectList: "",//学科信息
            gradeList: "",//年级信息
            questionList: "",//问题列表
            needIntegral: false,//是否需要积分
            questionSummary: null,//搜索内容
            gradeId: "",//当前年级id，默认空，为全部
            searchGradeId: "",//搜索时的年级id，默认全部年级
            searchSubjectId: "",//搜索时的学科id，默认全部学科
            subjectId: "",//当前学科id，默认空，为全部
            pageNum: 1,//当前页码，默认为1
            pageSize: 10,//每页显示条数，默认显示10条数据
            pages: 0,//总页数
            total: 0,//结果总数
            tp: "all"
        },
        methods: {
            /**
             * 获取年级列表
             */
            getGradeList: function () {
                $.get("/home/subject/getSubjectList", function (res) {
                    app.$data.subjectList = res.data;
                    console.log("subjectList:", res.data);
                })
            },
            /**
             * 获取学科列表
             */
            getSubjectList: function () {
                $.get("/home/grade/getGradeList", function (res) {
                    app.$data.gradeList = res.data;
                    console.log("gradeList:", res.data);
                })
            },
            /**
             * 获取问题列表
             */
            getQuestionList: function () {
                if (app.$data.tp == "search") {
                    app.$data.gradeId = app.$data.searchGradeId;
                    app.$data.subjectId = app.$data.searchSubjectId;
                }
                var requestData = {
                    gradeId: app.$data.gradeId,
                    subjectId: app.$data.subjectId,
                    needIntegral: app.$data.needIntegral,
                    pageNum: app.$data.pageNum,
                    pageSize: app.$data.pageSize,
                    questionSummary: app.$data.questionSummary
                };

                console.log("请求问题列表参数：", requestData);
                $.post("/home/question/getQuestionList", requestData, function (res) {
                    console.log("获取到的问题列表数据：", res.data);
                    //更新数据前把原来的viewer销毁，防止失效或者错乱
                    destroyViewer();
                    app.$data.questionList = res.data.list;
                    app.$data.total = res.data.pageInfo.total;
                    app.$data.pages = res.data.pageInfo.pages;
                    setTimeout(initViewer, 500);
                });
                app.$data.tp = "all";
            },
            /**
             * 修改当前查看的者年级的id值
             * @param id
             */
            changeGradeId: function (id) {
                app.$data.gradeId = id;
                console.log("改变后的id：", app.$data.gradeId);
                this.getQuestionList();
            },
            /**
             * 修改当前查看的者年级的id值
             * @param id
             */
            changeSubjectId: function (id) {
                app.$data.subjectId = id;
                console.log("改变后的id：", app.$data.subjectId);
                this.getQuestionList();
            },
            /**
             * 是否需要积分true or false
             * @param d
             */
            changeIntegral: function (d) {
                app.$data.needIntegral = d;
                this.getQuestionList();
            },
            /**
             * 通过按钮搜索
             */
            searchBtn: function () {
                app.$data.tp = "search";
                app.getQuestionList();
            },
            /*翻页显示*/
            changePage: function (totalPage) {
                if (totalPage > 0 || totalPage < app.$data.pages) {
                    app.$data.pageNum = totalPage;
                    app.getQuestionList();
                }
            },
            report: function (tp, id) {
                that.report(tp, id);
            }
        }
    });
    /*vue实例化结束*/

    /**
     * 举报
     */
    function report(tp, id) {
        if ([[${session.user}]] == null) {
            layer.confirm("请登录后举报！", {icon: 3, title: '提示'}, function (index) {
                location.href = "/home/index/login?pagePath=/home/index/question";
                layer.close(index);
            });
            return;
        }

        layer.prompt({title: '请输入举报详细描述', formType: 2}, function (text, index) {
            if (text == null || text == '') {
                layer.msg('请输入举报详细描述', {icon: 2, time: 1500});
                return null;
            }
            var userId = [[${session.user}]].id;
            var requestData = {
                userId: userId,
                reportType: tp,
                summary: text,
                beId: id
            };
            $.post("/home/report/addReport", requestData, function (res) {
                if (res.success) {
                    layer.msg("举报成功，感谢您的支持！", {time: 1500, icon: 1});
                }
            });
            layer.close(index);
        });
    }

    //首次加载获取数据
    app.getSubjectList();//获取学科列表
    app.getGradeList();//获取年级列表
    app.getQuestionList();//获取问题列表


</script>
</body>
</html>
